<template>
	<view class="changpw">
		<view class="ptlogin">
			<view class="login_input">
				<view class="input_title">原密码</view>
				<view class="input_text">
					<input class="input_textin" type="text" v-model="startPw.val" placeholder="请输入旧密码" />
					<image v-show="startPw.val" src="../../static/img/ic_delete.png" @click="clearinput(0)"></image>
				</view>
				
			</view>
			<view class="login_input">
				<view class="input_title">新密码</view>
				<view class="input_text">
					<input class="input_textin" :type="newPw.type" v-model="newPw.val" placeholder="请输入新密码" />
					<image v-show="newPw.val" src="../../static/img/ic_delete.png" @click="clearinput(1)"></image>
				</view>
				
			</view>
			<view class="login_input">
				<view class="input_title">确认密码</view>
				<view class="input_text">
					<input class="input_textin" :type="comfirmPw.type" v-model="comfirmPw.val" placeholder="请再次确认新密码" />
					<image v-show="comfirmPw.val" src="../../static/img/ic_delete.png" @click="clearinput(2)"></image>
				</view>
				
			</view>
			<button type="primary" @click="userpasswordFun()">提交</button>
		</view>
	</view>
</template>

<script>
	import { userpassword } from '../../api/index.js'
	export default {
		data() {
			return {
				startPw:{
					val:''
				},
				newPw:{
					type:'password',
					val:''
				},
				comfirmPw:{
					type:'password',
					val:''
				}
			}
		},
		onLoad:function(){
			
		},
		methods: {
			clearinput:function(type){
				if(type==0){
					this.startPw.val = ""
				}else if(type==1){
					this.newPw.val = ""
				}else if(type==2){
					this.comfirmPw.val = ""
				}
			},
			userpasswordFun:function(){
				let that = this;
				let old_password = this.startPw.val;
				let password = this.newPw.val;
				let confirm_password = this.comfirmPw.val;
				if(!old_password){
					uni.showToast({
						title: "请输入原密码",
						icon: 'none'
					})
				}else if(!password){
					uni.showToast({
						title: "请输入新密码",
						icon: 'none'
					})
				}else if(!confirm_password){
					uni.showToast({
						title: "请确认密码",
						icon: 'none'
					})
				}else if(password!=confirm_password){
					uni.showToast({
						title: "两次输入密码不一致",
						icon: 'none'
					})
				}else{
					userpassword({
						old_password:old_password,
						password:password,
						confirm_password:confirm_password
					}).then((res) => {
						console.log(res);
						uni.showModal({
							title:'提示',
							content: res.msg,
							complete:function(){
								if(res.code == 0){
									that.$store.dispatch("global/exitLogin")
								}
							}
						})
					}).catch((e)=>{
						console.log(e);
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.changpw{
		padding: 60rpx;
		.login_input{
			.input_con{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.uni-combox{
					height: 100rpx;
				}
				.obtainCode{
					color: #007AFF;
				}
			}
			.input_title{
				margin-bottom: 10rpx;
				font-size: $uni-font-size-lg;
			}
			.input_text{
				font-size: $uni-font-size-base;
				border-bottom: 1rpx #E5E5E5 solid;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				.input_textin{
					padding: 15rpx 50rpx 15rpx 0;
					width: 90%;
					border: none;
					font-size: $uni-font-size-base;
					outline: none;
				}
				image{
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
		button{
			margin: 100rpx 0 30rpx 0;
		}
	}
</style>
